<!--
 * @Author: gitee 1758024667@qq.com
 * @Date: 2023-02-28 16:04:45
 * @LastEditors: gitee 1758024667@qq.com
 * @LastEditTime: 2023-03-08 00:32:36
 * @FilePath: \parking-lot-management\src\views\coupon\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: gitee 1758024667@qq.com
 * @Date: 2023-02-28 16:04:45
 * @LastEditors: gitee 1758024667@qq.com
 * @LastEditTime: 2023-03-06 15:21:36
 * @FilePath: \parking-lot-management\src\views\coupon\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: gitee 1758024667@qq.com
 * @Date: 2023-01-15 20:44:19
 * @LastEditors: gitee 1758024667@qq.com
 * @LastEditTime: 2023-02-24 10:53:51
 * @FilePath: \parking-lot-management\src\views\order\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 表单 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left: 10px;margin-top: 20px;">
      <el-form-item label="停车场名称">
        <el-input v-model="formInline.name" placeholder="名称"></el-input>
      </el-form-item>
      <el-form-item label="单价">
        <el-input v-model="formInline.unitPrice" placeholder="小于等于"></el-input>
      </el-form-item>
      <el-form-item label="车位总数量">
        <el-input v-model="formInline.parkTotal" placeholder="大于等于"></el-input>
      </el-form-item>
      <el-form-item label="空闲车位数量">
        <el-input v-model="formInline.parkReQuatity" placeholder="大于等于"></el-input>
      </el-form-item>
      
      <el-form-item label="停车场状态">
        <!-- 状态选择器 -->
        <el-select v-model="formInline.status" clearable placeholder="请选择">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 查询 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <!-- 添加 -->
      <el-form-item>
        <el-button type="primary" @click="openForm">添加停车场</el-button>
      </el-form-item>
    </el-form>


    <!-- 列表可编辑 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="停车场名称" style="width: 10%">
      </el-table-column>
      <el-table-column prop="des" label="停车场描述" style="width: 10%">
      </el-table-column>
      <el-table-column prop="unitPrice" label="单价" style="width: 10%">
      </el-table-column>
      <!-- <el-table-column prop="couponType" label="优惠券类型" style="width: 10%">
      </el-table-column> -->
      <el-table-column prop="parkTotal" label="车位总数量" style="width: 10%">
      </el-table-column>
      <el-table-column prop="parkReQuatity" label="空闲车位数量" style="width: 10%">
      </el-table-column>
      <el-table-column prop="chargTotal" label="充电桩总数量" style="width: 10%">
      </el-table-column>
      <el-table-column prop="chargReQuatity" label="可用充电桩数量" style="width: 10%">
      </el-table-column>
      <el-table-column prop="status" label="状态" style="width: 10%">
      </el-table-column>
      <el-table-column fixed="right" label="操作" style="width: 10%">
        <template slot-scope="scope">
          <el-button @click="deleteData(scope.row.id)" type="text" size="small">删除</el-button>
          <el-button @click="editData(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页 -->
    <el-pagination background layout="prev, pager, next" :total=this.total style="padding: 30px 0; text-align: center;"
      @current-change="changeCurrentPage">
    </el-pagination>

    <!-- 添加优惠券的form表单 -->
    <el-dialog  title="添加或修改停车场数据" :visible.sync="dialogFormVisible">
      <el-form ref="parkingLotForm" :model="form">
        <el-form-item label="停车场名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="停车单价" :label-width="formLabelWidth" prop="unitPrice">
          <el-input-number v-model="form.unitPrice" controls-position="right" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="停车场状态" :label-width="formLabelWidth" prop="status">
          <el-select v-model="form.status" placeholder="请选择停车场状态">
            <el-option label="可用停车场" value="Y"></el-option>
            <el-option label="失效停车场" value="N"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车位总数量" :label-width="formLabelWidth" prop="parkTotal">
          <el-input-number v-model="form.parkTotal" controls-position="right" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="可用车位数量" :label-width="formLabelWidth" prop="parkReQuatity">
          <el-input-number v-model="form.parkReQuatity" controls-position="right" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="充电桩总数量" :label-width="formLabelWidth" prop="chargTotal">
          <el-input-number v-model="form.chargTotal" controls-position="right" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="可用充电桩数量" :label-width="formLabelWidth" prop="chargReQuatity">
          <el-input-number v-model="form.chargReQuatity" controls-position="right" :min="1"></el-input-number>
        </el-form-item>
        <!-- 描述 -->
        <el-form-item label="停车场描述" :label-width="formLabelWidth" prop="des">
          <el-input v-model="form.des" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 确认按键 -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitOrChangeForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryByConForPage, deleteById, insertParkingLot, UpdateParkingLot } from '@/api/parking_lot.js'
/*
 *@Date: 2023-01-14 22:06:37
 *@Description: 模块描述
*/
export default {
  name: '',
  data() {
    return {
      value1: '',
      value2: '',
      // 弹窗参数
      formLabelWidth: '120px',
      dialogTableVisible: false,
      dialogFormVisible: false,
      // 绑定添加和删除表单，用于清除
      form: {
        id:'',
        name:'',
        des:'',
        unitPrice:'',
        parkTotal:'',
        parkReQuatity:'',
        status:'',
        chargTotal:'',
        chargReQuatity:''
      },
      // 页面参数
      tableData: [{}],
      total: 0,
      formInline: {},
      statusOptions: [{
        value: 'Y',
        label: '可用停车场'
      }, {
        value: 'N',
        label: '废弃停车场'
      }]
    }
  },
  created() {
    this.init()
  },
  mounted() { },
  methods: {
    // 提交或者修改表单
    async submitOrChangeForm(){
      this.dialogFormVisible = false
      if(this.form.id == ''){
        console.log('添加停车场')
        console.log(this.form.id)
        await insertParkingLot(this.form)
        this.onSubmit()
      }else{
        console.log('修改停车场')
        console.log(this.form)
        this.changeTypeAndStatus()
        await UpdateParkingLot(this.form)
        this.onSubmit()
        // this.form.id = ''
      }
    },
    // 修改状态和类型，用于后端修改
    changeTypeAndStatus(){
      if(this.form.status == '可用停车场'){
        this.form.status = 'Y'
      }else if(this.form.status == '废弃停车场'){
        this.form.status = 'N'
      }
      
    },
    // 编辑表单
    editData(data){
      this.dialogFormVisible = true
      this.form = JSON.parse(JSON.stringify(data))
      console.log(this.form)
      console.log(this.formInline)
    },
    // 打开添加表单
    openForm(){
      this.dialogFormVisible = true
      this.$nextTick(()=>{
        this.$refs.parkingLotForm.resetFields();
      })
     
    },
    // 打开确认框
     deleteData(data) {
      this.$confirm('此操作将永久删除该停车场, 是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        deleteById(data)
        this.onSubmit()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 初始化表格
    async init() {
      const result = await queryByConForPage({})
      const res = result.data.data.records
      res.forEach(element => {
        element.status = this.changeStatus(element.status)
      })
      console.log(res)
      this.tableData = res
      this.total = result.data.data.total

    },

    // 分页查询
    async onSubmit() {
      const res = await queryByConForPage(this.formInline)
      const result = res.data.data.records
      result.forEach(element => {
        element.status = this.changeStatus(element.status)
      })
      this.total = res.data.data.total
      this.tableData = result
    },

    // 修改页
    async changeCurrentPage(page) {
      this.formInline.pageCount = page
      this.onSubmit()
    },

    // 更改状态函数
    changeStatus(key) {
      if (key == 'Y') {
        return '可用停车场'
      } else if (key == 'N') {
        return '废弃停车场'
      } 
    },

  }
}
</script>

<style lang="scss" scoped></style>
